<template>
    <div class="message">
        <div>
            <h1>这是一个出库主题名称+出库单号.</h1>
        </div>
        <div>
            <el-form :inline="true" ref="form" type="text" :model="form" :rules="rules" size="medium"
                label-width="150px" style="margin: 20px 80px 0 10px">
                <el-form-item label="创建人:">
                    <span>{{form.createBy}}</span>

                </el-form-item>

                <el-form-item label="创建时间:">
                    <span>{{form.createTime}}</span>

                </el-form-item>
                <el-form-item label="最后修改人:">
                    <span>{{form.updateBy}}</span>

                </el-form-item>
                <el-form-item label="修改时间:">
                    <span>{{form.updateTime}}</span>
                </el-form-item>
            </el-form>
        </div>

        <h2>基础信息</h2>

        <!-- 中间输入搜索框 -->

        <el-form size="small" :model="form"
      :rules="rules"
      :visible.sync="open"
      ref="form"  label-width="100px" :inline="true">
            <!-- 弹出框查询搜索 -->
            <!-- 项目名称 -->
            <el-form-item label="项目名称" prop="projectNo">
                <el-input v-model="form.projectNo" placeholder="请输入项目名称" clearable 
                    @keyup.enter.native="handleQuery" ><i slot="suffix" class="el-icon-s-order" @click="showFile"></i> </el-input>
            </el-form-item>
            <!-- 发货计划号 -->
            <!-- <el-form-item label="发货计划号" prop="receiptMaterialNo">
                <el-input v-model="queryParams.receiptMaterialNo" placeholder="发货计划号" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item><br> -->
            <!-- 发货时间 -->
            <el-form-item label="发货时间" prop="deliverGoodsTime">
        <el-date-picker clearable
          v-model="queryParams.deliverGoodsTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择发货时间">
        </el-date-picker>
      </el-form-item>
            <!-- 备注 -->
            <el-form-item label="备注" prop="comment" >
                <el-input
  type="textarea"
  :rows="2"
  placeholder="请输入内容"
  v-model="textarea">
</el-input>
            </el-form-item>
        </el-form>



        <h3 style="font-size: 24px;width: 141px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  margin: 10px  0  0  5px;">构建信息</h3>
        <template>
            <el-row>
                <el-button type="primary" @click="accretion">添加</el-button>
                <el-button type="warning" @click="yichu">移除</el-button>
            </el-row>
        </template>
        <div style="float: right; ">
            构件总数量：<span style="color:red">
                {{outCount}}
            </span>
            构件总重量：
            <span style="color:red">
                {{inWeight}}
            </span>
        </div>
        <!-- 下面表格 -->
        <div class="tables" style="margin-top:20px;">
            <el-form>
                <el-table border ref="multipleTable" :data="botList" tooltip-effect="dark" style="width: 100%" @selection-change="SelectionChangeOne">
                    <!-- @selection-change="handleSelectionChange" -->
                    <el-table-column type="selection" width="55"> </el-table-column>
                    <el-table-column label="序号" prop="id" width="120">
                    </el-table-column>
                    <el-table-column prop="materialType" label="构建编号" width="120">
                    </el-table-column>
                    <el-table-column prop="warehouseName" label="构建名称" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="updateTime" label="构建类型" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="specifications" label="规格" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="length" label="长度" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="netWeight" label="单净重量" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="buildNo" label="楼栋" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="floor" label="楼层" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="stockCount" label="库存数量" show-overflow-tooltip>
                    </el-table-column>
                
                    <el-table-column prop="count" label="计划发货数量" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-input-number v-model="scope.row.needCount" @change="inputChangeNumber(scope.row)"
                                controls-position="right" :min="0" :max="scope.row.stockCount" label="描述文字">
                            </el-input-number>
                        </template>
                    </el-table-column>
                  
                </el-table>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="Off">取消</el-button>
                <el-button type="primary" @click="keeps">保存</el-button>
            </div>
        </div>

        <!-- 添加弹出框 -->
        <el-dialog title="添加构件" :visible.sync="dialogTableVisible">
            <el-form size="small" label-width="68px" :inline="true">
                <!-- 弹出框查询搜索 -->
                <!-- 楼栋 -->
                <el-form-item label="楼栋" prop="buildNo">
                    <el-select v-model="queryParams.buildNo" filterable allow-create default-first-option
                        @change="selects" placeholder="楼栋">
                        <el-option v-for="item in  xialakuang" :key="item.value" :label="item.buildNo"
                            :value="item.buildNo">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 楼层 -->
                <el-form-item label="楼层" prop="floor">
                    <el-select v-model="queryParams.floor" filterable allow-create default-first-option
                        @change="selects" placeholder="楼层">
                        <el-option v-for="item in  floorSec" :key="item.value" :label="item.floor"
                            :value="item.floor">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 构件类型 -->
                <el-form-item label="构件类型" prop="compomentType">
                    <el-select v-model="queryParams.floor" filterable allow-create default-first-option
                        @change="selects" placeholder="构件类型">
                        <el-option v-for="item in  compomentSec" :key="item.value" :label="item.compomentType"
                            :value="item.compomentType">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 构件编号 -->
                <el-form-item label="构件编号" prop="compomentNo">
                    <el-select v-model="queryParams.compomentNo" filterable allow-create default-first-option
                        @change="selects" placeholder="构件编号">
                        <el-option v-for="item in  compomentSec" :key="item.value" :label="item.compomentNo"
                            :value="item.compomentNo">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 订单号 -->
                <!-- <el-form-item label="订单号" prop="floor">
                    <el-select v-model="queryParams.floor" filterable allow-create default-first-option
                        @change="selects" placeholder="订单号">
                        <el-option v-for="item in  xialakuang" :key="item.value" :label="item.floor"
                            :value="item.floor">
                        </el-option>
                    </el-select>
                </el-form-item> -->

                <el-form-item label="构件名称" prop="compomentName">
                    <el-input v-model="queryParams.compomentName" placeholder="请输入构件名称" clearable
                        @keyup.enter.native="handleQuery" />
                </el-form-item>
                <span margin-right="10px">
                    <template>
                        <!-- `checked` 为 true 或 false -->
                        <el-checkbox v-model="isStock">有在库量</el-checkbox>
                    </template>
                </span>

                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>



                <br>已勾选：<span>{{valLength}}</span>
                <div style="float: right; ">
                    构件总数量：<span style="color:red">
                        {{count}}
                    </span>
                    构件总重量：
                    <span style="color:red">
                        {{weight}}
                    </span>
                </div>
                <el-table border ref="multipleTable" :data="Lit" tooltip-effect="dark" style="width: 100%" @selection-change="SelectionChange">
                    <!-- @selection-change="handleSelectionChange" -->
                    <el-table-column type="selection" width="55"> </el-table-column>
                    <el-table-column label="序号" prop="id" width="120">
                    </el-table-column>
                    <el-table-column prop="materialType" label="构建编号" width="120">
                    </el-table-column>
                    <el-table-column prop="warehouseName" label="构建名称" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="compomentType" label="构建类型" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="specifications" label="规格" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="length" label="长度" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="netWeight" label="单净重量" show-overflow-tooltip>

                    </el-table-column>
                    <el-table-column prop="buildNo" label="楼栋" show-overflow-tooltip>

                    </el-table-column>
                    <el-table-column prop="floor" label="楼层" show-overflow-tooltip>

                    </el-table-column>
                    <el-table-column prop="stockCount" label="库存数量" show-overflow-tooltip>

                    </el-table-column>
                    <el-table-column prop="count" label="计划发货数量" width="120" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-input-number v-model="scope.row.needCount" @change="inputChangeNumber(scope.row)"
                                controls-position="right" :min="0" :max="scope.row.stockCount" label="描述文字">
                            </el-input-number>
                        </template>
                    </el-table-column>
                   
                </el-table>
                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize" @pagination="getList" />
                <div style="margin-top: 20px; text-align: center">
                    <el-form-item>
                        <el-button @click="dialogTableVisible = false">取消</el-button>
                        <el-button type="primary" @click="baocun">保存</el-button>
                    </el-form-item>
                </div>
            </el-form>

        </el-dialog>

    </div>

</template>
<script>

import { getDeliveryPlanInfo,updateDeliveryPlanInfo, listCompWarehouseInfosecl, getCompWarehouseStatistics } from "@/api/yard/DeliveryPlanInfo";
import { remove } from "nprogress";
export default {
    data() {
        return {
            count:0,
            weight:0,
            outCount:0,
            inWeight:0,
            // 备注
            textarea:'',
            // 弹框
            xialakuang:[],
            compomentSec:[],
            floorSec:[],
            floorSec:[],
            dialogTableVisible: false,
            form: {},
            lit: [],
            isStock: true,
            // 弹框查询left
            checked: [],
            arr:[],
            arr1:[],
            valLength:'',
            // 弹出层
            botList:[],
            open:false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                createBy: null,
                receiptMaterialNo: null,
                categoryName: null,
                supplierTheme: null,
                supplierName: null,
                materialType: null,
                deliverGoodsTime: null,
                compomentNo: null,
                warehouseName: null,
                warehouseArea: null,
                netWeight: null,
                materialPerson: null,
                materialTime: null,
                compomentName: null,
                projectNo: null,
                proTime: null,
                proName: null,
                categoryNo: null,
                specifications: null,
                unit: null,
                compomentType: null,
                materialName: null,
                count: null,
                updateTime: null,
                updateBy: null,
                createTime: null,
                // 楼栋
                buildNo: null,
                floor: null,
                // 数字选择
                remainderCount: null,
                stockCount:null
            },
            rules:{
                proName:[
                    { required:true,message:'项目名称不能为空',tirgger:"change"},
                ],
                proTime:[
                    { required:true,message:'发货时间不能为空',tirgger:"change"},
                ]
            }
        }
    },
    created() {
        getDeliveryPlanInfo(this.$route.query.id).then((response) => {
            console.log(response)
            this.form = response.data;
            this.botList=response.data.compWarehouseInfoList

            let count=0;
            let weight=0;
            for(let j=0;j<this.botList.length;j++){
                let needCount=this.botList[j].needCount==undefined ? 0:this.botList[j].needCount;
                let w=this.botList[j].netWeight==undefined ? 0:this.botList[j].netWeight;
                count=count+needCount;
                weight=weight+w*needCount;
            }
            this.outCount=count;
            this.inWeight=weight;
        });
    },
    methods: {
        baocun(){
            //this.botList = this.arr
            
            function unique(arr, val) {
                const res = new Map()
                return arr.filter((item) => !res.has(item[val]) && res.set(item[val], 1))
            }    
            this.botList=unique([...this.botList,...this.arr],"id");


            this.dialogTableVisible = false
            let count=0;
            let weight=0;
            for(let j=0;j<this.botList.length;j++){
                let needCount=this.botList[j].needCount==undefined ? 0:this.botList[j].needCount;
                let w=this.botList[j].netWeight==undefined ? 0:this.botList[j].netWeight;
                count=count+needCount;
                weight=weight+w*needCount;
            }
            this.outCount=count;
            this.inWeight=weight;
        },
        SelectionChange(val){
            console.log(val)
            this.arr = val;
            for(let i = 0;i<this.arr.length;i++){
                console.log(this.arr.length)
                this.valLength = this.arr.length
            }
        },
        SelectionChangeOne(fit){
           this.arr1 = fit;
        },
        keeps(){
            this.$refs["form"].validate()
            this.form.deliveryCompRefList=this.botList;
            updateDeliveryPlanInfo(this.form).then(res=>{
                this.$modal.msgSuccess("修改成功")
                this.$router.go(-1)
            })
            
        },
        yichu(){
            let arr2=[];



            for(let i=0;i<this.botList.length;i++){
                let f=false;
                for (let index = 0; index < this.arr1.length; index++) {
                    if(this.botList[i].id==this.arr1[index].id){
                        f=true;
                    }
                }
                if(!f){
                    arr2.push(this.botList[i]);
                }
            }
            this.botList=arr2;

            let count=0;
            let weight=0;
            for(let j=0;j<this.botList.length;j++){
                let needCount=this.botList[j].needCount==undefined ? 0:this.botList[j].needCount;
                let w=this.botList[j].netWeight==undefined ? 0:this.botList[j].netWeight;
                count=count+needCount;
                weight=weight+w*needCount;
            }
            this.outCount=count;
            this.inWeight=weight;
        },
        // 图标点击
        showFile(){
            console.log(1232132123)
        },
        // 添加弹框的按钮
            accretion() {
            this.dialogTableVisible = true;
            listCompWarehouseInfosecl(this.queryParams).then(res=>{
                for(let i = 0;i<res.rows.length;i++){
                this.xialakuang = res.rows[i].buildNo
                this.xialakuang = res.rows
                this.floorSec = res.rows[i].floor
                this.floorSec = res.rows
                this.compomentSec = res.rows[i].compomentType
                this.compomentSec = res.rows
                this.compomentSec = res.rows[i].compomentNo
                this.compomentSec = res.rows
                
                }
                this.Lit = res.rows
                console.log(this.Lit)
            })
            getCompWarehouseStatistics(this.queryParams).then(response => {
            this.count = response.count;
            this.weight = response.weight;
        
            });
        },
        handleUpdate() {
            this.dialogTableVisible = true
        },
        // 下面表格取消按钮
        Off() {
            // this.$router.go(-1)
        },
        // 下面表格确定按钮
    },
    reset() {
    this.form = {
      id: null,
      receiptMaterialNo: null,
      supplierTheme: null,
      supplierName: null,
      categoryName: null,
      materialType: null,
      compomentName: null,
      summary: null,
      warehouseName: null,
      warehouseArea: null,
      materialPerson: null,
      materialTime: null,
      supplierNo: null,
      transportUnit: null,
      carNumber: null,
      netWeight: null,
      compomentType: null,
      deliverGoodsTime: null,
      freight: null,
      categoryNo: null,
      categoryNo: null,
      createTime: null,
      createBy: null,
      comment: null,
      projectNo: null,
      proTime: null,
      proName: null,
      specifications: null,
      unit: null,
      materialName: null,
      count: null,
    };
    this.resetForm("form");
  },
}
</script>
<style lang="scss" scoped>
h2 {
    width: 141px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    border-bottom: 1px solid red;
    margin: 60px 0 10px 5px;

}

.el-input__inner {
    border: 1px solid;
}

.dialog-footer {
    text-align: center;
    margin-top: 15px;

}

.outers .headers {
    width: 100%;
    height: 50px;

    border-bottom: 1px solid gainsboro;

    h1 {
        margin-left: 50px;
        padding-top: 10px;
    }
}

.bottom {
    margin-left: 30px;
    margin-top: 0px;

    .adds {
        display: flex;
        margin-bottom: 10px;
    }
}

.el-select .el-input {
    width: 130px;
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}

.message {
    padding-left: 20px;
    width: 50%vh;
    height: 170px;
    margin-right: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
    border: 1px solid gainsboro;
    border-radius: 1rem;
    margin-top: 15px;

    span {
        font-size: 20px;
        margin-right: 120px;
    }
}

.gongying {
    width: 100%;
    text-align: center;

    tr {
        height: 50px;
        line-height: 50px;
    }
}
</style>